Chromeのネットワークタブの Request Status 内訳

https://developers.google.com/web/tools/chrome-devtools/network/imgs/waterfall-hover.png

TLDR

パフォーマンスチューニングするときに、ブラウザがファイルをどのように受け取っているのか知る必要がある

Chromeでは、以下の内訳でファイルを取得している

公式解説

Queueing

キューに追加する

他に優先されるリクエストがある場合、キューに追加される

TCP/1において1つのoriginに対して6つのTCP接続が限界（ブラウザが制限している）

Stalled

何らかの理由、ブラウザメモリ不足などにより要求がストップしている状態

DNS Lookup

IPアドレスの解決時間 hoge.com => 192.68.11.. であると解決

Initial connection

TCPハンドシェイク/再試行を含む接続を確立し、SSLをネゴシエートする

※ハンドシェイクは、2点間の通信路を確立した後、本格的に通信を行う前にパラメータを取り決めるなどの事前のやり取りを自動的に行うこと

※ネゴシエート＝交渉する

Proxy negotiation

プロキシサーバとの接続確立に要した時間

Request sent

ここでやっとリクエストを送信

ServiceWorker Preparation

ServiceWorkerの起動

Request to ServiceWorker

ServiceWorkerへのリクエスト

Waiting (TTFB).

ブラウザが応答の最初のバイトを待っている。

TTFBはTime To First Byteの略。

このタイミングには、1リクエストにおいて、待ち時間とサーバーが応答を準備するのにかかった時間が含まれます。

Content Download

コンテンツのダウンロード中

Receiving Push

HTTP/2 サーバーを介して、プッシュを受け取る

Reading Push

受信したプッシュのローカルデータを読み取る